<template>
  <div class="My-activity Organize-fellowship pages-box">
    <div class="header flex-center">
      <i class="iconfont icon-dajiantou" @click="$router.go(-1)"></i>我的活动
    </div>
    <div class="section">
      <div class="content">
        <div class="tongji-title">参与统计情况</div>
 <div class="tongji-con flex-align">
          <div class="con-it">
            <div class="num">{{ info.signupNum || 0 }}次</div>
            <div class="title">报名次数</div>
          </div>
          <div class="line"></div>
          <div class="con-it">
            <div class="num">{{ info.participantsNum || 0 }}次</div>
            <div class="title">参加次数</div>
          </div>
          <div class="line"></div>
          <div class="con-it">
            <div class="num">{{ info.violationNum || 0 }}次</div>
            <div class="title">未履约次数</div>
          </div>
        </div>
        <div class="tab-box">
          <div
            class="tab"
            :class="{ tabActive: tabActive === 0 }"
            @click="onToggle(0)"
          >
            <div class="tab-label">已报名活动</div>
            <div class="line"></div>
          </div>
          <div
            class="tab"
            :class="{ tabActive: tabActive === 1 }"
            @click="onToggle(1)"
          >
            <div class="tab-label">可报名活动</div>
            <div class="line"></div>
          </div>
        </div>
        <div  v-if="tabActive === 0">
        <van-list
              v-model="loading.isLoading"
              :finished="loading.isFinished"
              @load="onListLoad(0)"
              :immediate-check="false"
              finished-text="没有更多了"
            >
              <div v-if="loading.list.length > 0">
                <div
                  class="item"
                  v-for="(item, index) in loading.list"
                  :key="index"
                >
                  <img v-lazy="ImgDomin(item.coverImg)" @click="getDetail(item)" alt="" />
                  <div class="success">预约成功</div>
                  <div class="con flex-between">
                    <div class="container">
                      <div class="title">{{ item.activityTitle }}</div>
                      <div class="tip">
                        组织单位：<span>{{ item.brandName }}</span>
                      </div>
                      <div class="tip">
                        活动地点：<span>{{ item.activityAddress }}</span>
                      </div>
                      <div class="tip">
                        活动时间：<span
                          >{{ item.startTime }}~{{ item.endTime }}</span
                        >
                      </div>
                      <div class="tip">注：活动开始前48小时不能取消未参加将视为未履约</div>
                    </div>
                    <div class="btn-box">

                   <div class="btn bt2"
                   >{{stateList[index]&&stateList[index].text}}</div>
                        <div class="btn btn1"   @click.stop="onCancel({id:item.id})">取消预约</div>
                    </div>

                  </div>
                </div>
              </div>
              <div class="empty" v-else>
                <img
                  style="width: 100%"
                  src="../assets/img/common-empty.png"
                  alt=""
                />
              </div>
            </van-list>
        </div>
        <div  v-if="tabActive === 1">
  <van-list
      :immediate-check="false"
              v-model="loading.isLoading"
              :finished="loading.isFinished"
              finished-text="没有更多了"
              @load="onListLoad(1)"
            >
              <div v-if="loading.list.length > 0">
                <div class="item1" v-for="(item, index) in loading.list" :key="index"
                     @click="getDetail(item,'ActivityDetail')"
                >
                  <img v-lazy="ImgDomin(item.coverImg)" alt="" />
                  <div class="con1">
                    <div class="activity-title ellipsis">
                    {{ item.activityTitle }}
                    </div>
                    <div class="tip">
                      活动时间：<span>{{ item.createTime }}</span>
                    </div>
                    <div style="display: flex;">
                      <div class="btn flex-center">
                        查看详情
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="empty" v-else>
                <img
                  style="width: 100%"
                  src="../assets/img/common-empty.png"
                  alt=""
                />
              </div>
            </van-list>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  cancelActivity,
} from "@/api/activity";
import useList from '@/hooks/use-List'
import useInfo from '@/hooks/use-Info'
import useCancel from '@/hooks/use-Cancel'
import Refresh from '@/components/Refresh/refresh'
import{onMounted,computed} from '@vue/composition-api'
export default {
  setup(props,{root:{$router}}){
    const {loading,tabActive,onToggle,onListLoad,onRead,getDetail} = useList($router)
    const {info} = useInfo($router)
    const {onCancel} = useCancel($router,cancelActivity)
    //活动状态
    const stateList=computed(()=>{
      if(loading&&loading.value.list&&loading.value.list.length){
        return loading.value?.list?.map(item=>{
         const {status:s1} = item
         let temp = {}
         switch (s1) {
           case 0:
             temp={
               text:'未开始',
               cls:'',
               status
             }
             break
           case 1:
             temp={
               text:'预约已结束',
               cls:'',
               status
             }
             break
           case 2:
             temp={
               text:'已开始',
               cls:'',
               status
             }
             break
           case 3:
             temp={
               text:'已结束',
               cls:'',
               status
             }
             break
           default:
             temp={
               text:'',
               cls:'',
               status:-1
             }
         }
         return temp
       })
     }

    })
    return {
      info,stateList,
      loading,tabActive,onToggle,onListLoad,onRead,getDetail,onCancel
    }
  },
  components: {
    Refresh
  },
};
</script>
<style lang="less" scoped>
@import url("../assets/css/organize-fellowship.less");
@import url("../assets/css/my-activity.less");
.item{
  position:relative;
  .success{
    position:absolute;
    top: 0;
    left: 79%;
    background-color:#fd7895;
    color: #ffffff;
    padding: 0 3px;
    border-top-right-radius:10px;
  }
}
</style>
